<!--
 * @Descripttion: 
 * @version: 
 * @Author: 尹伊
 * @Date: 2020-12-01 22:20:37
 * @LastEditors: 尹伊
 * @LastEditTime: 2020-12-01 22:35:19
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="button" name='' value="按钮1">
  <input type="button" name='' value="按钮2">
  <input type="button" name='' value="按钮3">
  <script>
    var inp = document.getElementsByTagName('input')
    for (var i = 0; i < inp.length; i++) {
      // inp[i].onclick = function () {
      //   console.log(this, 'this')
      //   this.style.background = 'yellow'
      // }

      // for循环每次执行一个匿名函数，并且匿名函数中的作用域传入了当时的i作为参数传递
      // (function (i) {
      //   inp[i].onclick = function () {
      //     console.log(i)
      //     inp[i].style.background = 'yellow'
      //   }
      // })(i)

      inp[i].onclick = function (i) {
        return function () {
          inp[i].style.background = 'yellow'
        }
      }(i)

    }
    console.log(i, '值')
  </script>
</body>

</html>